<template>
	<view class="paihangbang">
		<!-- 固定定位，在 h5 有问题 -->
		<!-- <view style="position: fixed;top: 0;left: 0;width: 100%;height: 70rpx;"> -->
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		<!-- </view> -->
		<view class="content" v-if="content">
			<view class="title">
				<view class="title-left">
					<image :src="content.coverImgUrl" mode=""></image>
				</view>
				<view class="title-right">
					<view class="name">
						{{content.name}}
					</view>
					<view class="update">
						最近更新：{{content.updateTime|updateTime}}({{content.updateFrequency}})
					</view>
					<view class="playCount">
						播放：{{content.playCount}}次
					</view>
					<view class="introduce">
						简介：{{content.description}}
					</view>
				</view>
			</view>
		</view>
		<!-- 歌曲列表渲染 -->
		<view class="gequ" v-if="topListXiangqing">
			<!-- <uni-table border stripe emptyText="暂无更多数据"> -->
			<!-- 表头行 -->
			<!-- <uni-tr> -->

			<!-- <uni-th align="center" width="240">歌名</uni-th> -->

			<!-- <uni-th align="center">歌手</uni-th> -->
			<!-- </uni-tr> -->
			<!-- 表格数据行 -->
			<!-- <uni-tr v-for="item in topListXiangqing" :key="item.id"> -->
			<!-- <uni-td  @click="gequToBofang(item.id)">{{item.name}}</uni-td> -->
			<!-- <uni-td>{{item.ar | name}}</uni-td> -->
			<!-- </uni-tr> -->
			<!-- </uni-table> -->
			<view class="gequ-title">
				<view>
					歌名
				</view>
				<view>
					歌手
				</view>


			</view>
			<view class="gequ-item" v-for="item in topListXiangqing" :key="item.id" @click="gequToBofang(item.id)">
				<view class="one-lint-hidden">
					{{item.name}}
				</view>
				<view class="one-lint-hidden">
					{{item.ar | name}}
				</view>
			</view>
		</view>

		<!-- 歌单的评论 -->
		<view class="pinglun">
			<view class="name">
				{{content.name}}评论
			</view>
			<!-- 调用 评论 自定义组件 -->
			<pinglun :comments="comments"></pinglun>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				current: 0, // 默认激活
				tabs: [], // 数组
				topList: [], // 榜单名字等 不包含榜单下的歌曲
				topListXiangqing: [], // 某个榜单下的歌曲详情
				comments: [], // xxx 榜单下的评论
			};
		},
		onLoad() {
			// 获取榜单名字
			this.getTopList()
			// this.getTopListXiangqing()
		},
		computed: {
			content() {

				return this.topList[this.current]
			}
		},
		filters: {
			updateTime(value) {
				return moment(value).format('YYYY年MM月DD日').substr(5)
			},
			name(value) {
				let str = ''
				value.map((item, index) => {
					if (index === 0) {
						str = str + item.name
					} else {
						str = str + '/' + item.name
					}

				})
				return str
			}
		},
		options: { styleIsolation: 'shared' },
		methods: {
			// 获取榜单列表
			async getTopList() {
				let {
					data
				} = await uni.$request('get', '/toplist')
				if (data.code === 200) {
					this.topList = data.list
					data.list.map((item, index) => {
						this.$set(this.tabs, index, item.name)
					})

					// 获取完毕榜单 名字后，立即获取第一个榜单歌曲
					this.getTopListXiangqing(this.topList[this.current].id)
					// 默认获取 评论
					this.getPl(this.topList[this.current].id)
				}
			},
			// 获取榜单下的详情
			async getTopListXiangqing(id) {
				this.topListXiangqing = []
				let {
					data
				} = await uni.$request('get', '/playlist/detail?id=' + id)

				if (data.code === 200) {
					this.topListXiangqing = data.playlist.tracks
				}
			},
			// 获取评论
			async getPl(id) {
				this.comments = []
				let res = await uni.$request('get', '/comment/playlist?id=' + id)
				if (res.data.code == 200) {
					let comments = uni.$utils.formattingComments(res.data.comments)
					// this.comments = res.data.comments
					this.comments = comments
				}
			},
			changeTab(index) {
				console.log(index);
				// current 变化的时候
				// 获取详情 就是榜单的歌曲
				this.getTopListXiangqing(this.topList[this.current].id)
				// 获取歌单的评论
				this.getPl(this.topList[this.current].id)
				// 返回顶部
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			gequToBofang(id) {
				console.log(id);
				uni.navigateTo({
					url: '/subPackages/pages/songPlay/songPlay?id=' + id
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	/deep/ .uni-table-scroll {
		// 移除掉某个属性
		overflow-x: unset !important;
	}

	.paihangbang {
		position: relative;
		background-color: #F1F1F1;

		.content {
			background-color: #fff;
			margin-top: 16rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 20rpx;
			// height: 1000rpx;


			.title {
				display: flex;

				.title-left {
					margin-right: 20rpx;

					image {
						height: 200rpx;
						width: 200rpx;
						border-radius: 20rpx;
					}
				}

				.title-right {
					.name {
						font-size: 40rpx;
						margin-bottom: 20rpx;
					}

					.update {
						font-size: 26rpx;
						color: #555555;
						margin-bottom: 10rpx;
					}

					.playCount {
						font-size: 26rpx;
						color: #555555;
						margin-bottom: 10rpx;
					}

					.introduce {
						font-size: 26rpx;
						color: #555555;
					}
				}
			}
		}

		.gequ {
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0;

			.gequ-title {
				display: flex;
				margin-bottom: 20rpx;

				>view {
					text-align: center;

					&:nth-child(1) {
						box-sizing: border-box;
						width: 70%;
					}
				}
			}

			.gequ-item {
				display: flex;

				>view {
					// text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-bottom: 1px solid #555;
					margin-bottom: 10rpx;
					color: #333;

					&:nth-child(1) {
						box-sizing: border-box;
						width: 70%;
					}

					&:nth-child(2) {
						box-sizing: border-box;
						width: 30%;
					}
				}
			}
		}

		.pinglun {
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0;

			.name {
				font-size: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
